<template>
    <div class="person">
    <ul>
        <li v-for="item in list"  :key="item.id">
            姓名：{{ item.name }}--年龄：{{ item.age }}
        </li>
    </ul>
    </div>

</template>

<script setup lang="ts" name="Person">
import type { persons } from '@/types';


    // 可以接受父组件传递过来的参数
    // let h=defineProps(["a"])
    // console.log(h.a)
    // 第一种使用方式：仅接受父组件传递进来的参数信息
    // defineProps(["list"])
// 第二种使用方式，接收数据后，并进行限制，限制要接受的数据类型
    // defineProps<{"list":persons}>()
    // 第三种使用方式，接收数据后，进行限制数据的类型，并设置参数的必要性
    // 在接受list时，父组件可以传递参数也可以不传，若传递，直接进行接收，若没有传递，则使用后面指定的默认值
    withDefaults(defineProps<{"list"?:persons}>(),{
        list:()=>[
            {id:"kjlkjljlkjlk04",name:"qianba",age:99}
        ]
    })



</script>
<!-- 在style标签中，加上scoped属性，则表示当前的样式做作用于当前页面 -->
<style scoped>
.person{
    background-color: lightseagreen;
	box-shadow: 6px 6px 12px gray;
	border-radius: 6px;
	line-height: 40px;
	padding:10px;

}
</style>